<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .narrow {
            width: 50px;
        }
    </style>
</head>

<body>
    <p id="pBomb">炸弹信息</p>
    <p id="pClock">倒计时</p>
    <button id="btn">设置/拆除炸弹</button>
    <hr>



    <!-- 拓展【定时炸弹】实现点击按钮 在清除炸弹/设置炸弹之间切换  -->
    <script>
        /* 定义炸弹定时器 钟表定时器 */
        var bombTimer = null
        var clockTimer = null

        // 炸弹爆炸时间
        var timeout = 3;

        // 动态倒计时
        var countDown = timeout

        btn.onclick = function () {

            /* 如果炸弹定时器未设置 */
            // if (bombTimer===null) {
            if (!bombTimer) {

                // 计时立刻开始
                // 先显示3
                pClock.innerText = countDown = timeout
                // 然后每秒递减一下
                clockTimer = setInterval(function () {
                    pClock.innerText = --countDown
                }, 1000);

                /* 设置延时爆炸的炸弹 */
                bombTimer = setTimeout(
                    function () {
                        // 爆炸
                        pBomb.innerText = "go to hell!"

                        // 清除倒计时
                        clearInterval(clockTimer)

                        // 炸弹定时器重新置空(这样下次就可以重新设置了)
                        bombTimer = null
                    },
                    timeout * 1000
                )

                // 显示炸弹状态
                pBomb.innerText = "炸弹已安装"

            }

            /* 炸弹已设置时 移除之 */
            else {
                /* 同时移除炸弹和钟表 */
                clearTimeout(bombTimer)
                clearInterval(clockTimer)

                // 标记炸弹已拆除（再点按钮才能再次设置）
                bombTimer = null

                // 显示炸弹状态
                pBomb.innerText = "炸弹已拆除"
            }

        }
    </script>


    <!-- 用户在页面输入目标时间，点击按钮，页面动态显示距离该时间的倒计时 -->
    <input class="narrow" type="text" id="ipYear">年
    <input class="narrow" type="text" id="ipMonth">月
    <input class="narrow" type="text" id="ipDate">日
    <p id="pCountDown">假日倒计时</p>
    <button id="btn2">开始倒计时</button>
    <hr>
    <script>
        function formatTimeDiffer(millis, prefix = "") {
            var days = parseInt(millis / (24 * 3600 * 1000))
            var oddMillis = millis % (24 * 3600 * 1000)
            var hours = parseInt(oddMillis / (3600 * 1000))
            var minutes = parseInt(oddMillis % (3600 * 1000) / (60 * 1000))
            var seconds = parseInt(oddMillis % (60 * 1000) / 1000)

            return `${prefix}${days}天零${hours}小时${minutes}分${seconds}秒`
        }

        var timer = null;
        btn2.onclick = function () {
            var year = ipYear.value * 1, month = ipMonth.value * 1, _date = ipDate.value * 1
            var targetDate = new Date(year, month - 1, _date)

            if (!timer) {
                timer = setInterval(
                    function () {
                        // pCountDown.innerText = targetDate - new Date()
                        pCountDown.innerText = formatTimeDiffer(targetDate - new Date(), '距离劳动节还有:')
                    },
                    1000
                )
            } else {
                clearInterval(timer)
                timer = null
            }

        }
    </script>

    <!-- 手写排序 -->
</body>

</html>